<template>
    <el-container>
        <!-- <el-button :plain="true" @click="open">打开消息提示</el-button> -->
        <el-header>
            资方注册
        </el-header>
        <el-main>
           <el-form ref="form" :model="form" label-width="100px" status-icon :rules="rules">
                <el-form-item label="绑定手机号"  prop="tel">
                    <el-input type="tel" v-model.number="form.tel"></el-input>
                </el-form-item>
                <el-form-item label="字符验证码">
                    <el-input v-model="form.zfCode"></el-input>
                    <img :src="zfImg" alt="" @click="changImg" class="zfImg">
                </el-form-item>
                <el-form-item label="短信验证码">
                    <el-input v-model="form.dxCode"></el-input>
                    <p class="getSMS SMS" @click="getSMS" v-if="SMSstatus">获取验证码</p>
                    <p v-else class="waitSMS SMS">{{SMStime}}s</p>
                </el-form-item>
                <el-form-item label="设置登陆密码">
                    <el-input v-model="form.pwd"></el-input>
                </el-form-item>
                <el-form-item label="邀请码">
                    <el-input v-model="form.inviteCode"></el-input>
                </el-form-item>
                <el-button type="primary" @click="onSubmit('form')">下一步</el-button>
           </el-form>
        </el-main>
    </el-container>
</template>

<script>
import {getSessionId,sendSms,register} from '@/api/login'
import { commonUrl } from '@/config/index'
import {msgMixin} from '@/common/mixin'
export default {
    mixins:[msgMixin],
    data() {
        let validatorTel = (rule,value,callback) => {
            let reg = /^1\d{10}$/;
            if(!value) {
                return callback(new Error('手机号不能为空'))
            }else {
                if(reg.test(value)) {
                    callback()
                }else {
                    return callback(new Error('请输入正确的手机号码'))
                }
            }
        }
        let validatorZfcode = (rule,value,callback) => {
            console.log(1)
        }
        let validatorDxcode = (rule,value,callback) => {
            console.log(2)
        }
        return {
            sess_id: '',
            SMStime: 10,
            SMSstatus: true,
            zfImg: '',
            form: {
                tel: '',
                zfCode: '',
                dxCode: '',
                pwd: '',
                inviteCode:''
            },
            rules: {
                tel:[
                    {validator: validatorTel, trigger: 'blur'}
                ],
                zfCode: [
                    {validator: validatorZfcode, trigger: 'blur'}
                ],
                dxCode: [
                    {validator: validatorDxcode, trigger: 'blur'}
                ]
            }
        }
    },
    created() {
        setTimeout(() => {
            this.changImg()
        },20)
    },
    methods: {
        
        getSMS() {
            sendSms(this.form.tel,this.sess_id,this.form.zfCode,7).then((res) => {
                if(res.code === 1) {

                }else {
                    this.openMsg('error',res.msg)
                }
            })
            this.SMSstatus = false
            this.timers()
        },
        timers() {
            let timer = setInterval(() => {
                this.SMStime--
                if(this.SMStime === 0) {
                    clearInterval(timer)
                    this.SMStime = 10
                    this.SMSstatus = true
                }
            },1000)
        },
        changImg() { 
            getSessionId().then((res) => {    
                this.sess_id = res.data.sess_id        
                this.zfImg = `${commonUrl.verify}?sess_id=${res.data.sess_id}`
            })
        },
        onSubmit(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    register(this.form).then((res) => {
                        if(res.code === 1) {
                            this.$router.push('/baseInfo')
                        }else {
                            this.openMsg('error',res.msg)
                        }
                    })
                    // this.$router.push('/baseInfo')
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
}
</script>


<style lang="scss" scoped>
.el-container {
    .el-header {
        height: 100px !important;
        line-height: 100px;
        font-size: 20px;
    }
    .el-main {
        .el-form {           
            width: 800px;
            margin: 0 auto;
            .el-button {
                width: 300px;
            }
            .el-form-item {
                position: relative;
                .zfImg {
                    cursor: pointer;
                    height: 100%;
                    position: absolute;
                    right: 0;
                    top: 0;
                }
                .SMS {
                    width: 80px;
                    cursor: pointer;
                    height: 100%;
                    position: absolute;
                    right: 0;
                    top: 0;
                    text-align: center;
                    font-size: 12px;
                    background-color: #eee;
                }
                .getSMS {                                                      
                    color: blue;
                }
                .waitSMS {                                  
                    color: #fff;
                }
            }
        }
    }
}
</style>

